<?php
$p = \Yii::$app->controller->module->templateAsset."/shenghuojianji/";
?>
<style type="text/css">
 
.showwords 
{
    font-size: 26px;
    color: black;
    letter-spacing: 5px;
    position: absolute;
    font-weight: bold;
    z-index: 1;
    top: 85%;
    margin: -39px;
    left: 39px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-shadow: 2px 2px 20px white, -2px -2px 20px white, -2px 2px 20px white, 2px -2px 20px white;
    /*background-color: rgba(255, 255, 255, 0.4);*/
}

*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    /*background-color: black;*/
}

#container
{
    width: 500px;
    height: 760px;
    position: absolute;
    overflow: hidden;
}
#page1{position:absolute;top:-50px;left:0px;display: none;}

#kuang1{
    position: absolute;top: 0px;left: 0px;}
#lan1
{
    position:absolute;top:110px;left:90px;opacity: 0;
/*    -webkit-animation:lan1 2.6s linear 4s ;
*/}
#memory
{
    position:absolute;top:60px;left:510px;opacity: 0;
/*    -webkit-animation:memory 2.4s linear 3.8s ;
*/}
#huu1
{
    position:absolute;top:64px;left:-18px;opacity:0;-webkit-transform:scale(0.8,0.8);
/*    -webkit-animation:huu1 2.8s linear 3.2s;
*/}
@-webkit-keyframes huu1
{
    0%{-webkit-tansform:translate(0px,0px) rotate(0deg) scale(0.8,0.8);opacity: 1;}
    86.6%{-webkit-transform:translate(0px,0px) rotate(20deg) scale(0.8,0.8);opacity: 1;}
    100%{-webkit-transform:translate(70px,0px) rotate(20deg) scale(0.8,0.8);opacity: 1;}
}
#huu11
{
    position:absolute;top:652px;left:351px;opacity: 0;
/*    -webkit-animation:huu11 2.7s linear 3.5s ;
*/}
@-webkit-keyframes memory
{
    0%{-webkit-transform:translate(0px,0px);opacity: 1;}
    14%{-webkit-transform:translate(-352px,37px);opacity: 1;}
    21.1%{-webkit-transform:translate(-340px,37px);opacity: 1;}
    84.2%{-webkit-transform:translate(-340px,37px);opacity: 1}
    100%{-webkit-transform:translate(-340px,57px);opacity: 0;}
}
@-webkit-keyframes lan1
{
    0%{-webkit-transform:rotate(8deg) scale(1,1);opacity: 1;}
    9.5%{-webkit-transform:rotate(8deg) scale(1.3,1.3);opacity: 1;}
    12.7%{-webkit-transform:rotate(8deg) scale(1,1);opacity: 1;}
    92%{-webkit-transform:rotate(38deg) scale(1,1);opacity: 1}
    100%{-webkit-transform:translate(-10px,-50px) rotate(83deg) scale(1,1);opacity: 0}
}
@-webkit-keyframes huu11
{
    0%{-webkit-transform:rotate(18deg) scale(1,1);}
    7.8%{-webkit-transform:rotate(18deg) scale(1.3,1.3);}
    10.9%{-webkit-transform:rotate(18deg) scale(1,1);}
    85.9%{-webkit-transform:rotate(58deg) scale(1,1);opacity: 1}
    100%{-webkit-transform:translate(0px,46px) rotate(63deg) scale(1,1);opacity: 0}
}
@-webkit-keyframes huu1111
{
    0%{-webkit-transform:scale(0.8,0.8);opacity: 0}
    100%{-webkit-transform:scale(0.8,0.8);opacity: 1}
}

/*文字*/
 #k1
{
    position: absolute;top: 300px;left: 170px;width: 300px;height: 332px;;
/*  -webkit-animation:k1 3.4s linear;
*/}

#huang1{position: absolute;top: 0px;left: 0px ;opacity: 0;
/*    -webkit-animation:huang1 3.4s linear ;
*/}
/*黄圈1*/
@-webkit-keyframes huang1
{
    0%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(1.34,1.33);opacity: 1;}
    23.5%{-webkit-transform:translate(0px,0px) rotate(360deg) scale(0.29,0.29);opacity: 1;}
    26.3%{-webkit-transform:translate(0px,0px) rotate(360deg) scale(0.13,0.13);opacity: 1;}
    29.1%{-webkit-transform:translate(0px,0px) rotate(360deg) scale(0.183,0.18);opacity: 1;}
    41.6%{-webkit-transform:translate(0px,0px) rotate(360deg) scale(0.183,0.18);opacity: 1;}
    69.3%{-webkit-transform:translate(0px,0px) rotate(-340deg) scale(2.47,2.42);opacity: 1;}
    100%{-webkit-transform:translate(0px,0px) rotate(-380deg) scale(2.14,2.13);opacity: 1;}
}



#huang2{position: absolute;top:0px;left: 0px; opacity: 0;
/*    -webkit-animation:huang2 0.8s linear;
*/}
#huang3{position: absolute;top: 0px;left: 0px;opacity: 0;
/*    -webkit-animation:huang3 0.8s linear;
*/}

/*闪光*/
#biu1{position:absolute;top:0px;left:40px;width:30px;height:5px;overflow:hidden;
}
#biu11{position:absolute;top:0px;left:0px;width:30px;height:5px;background-color:yellow;opacity:0;
/*    -webkit-animation:biu11 3.4s linear
*/}
#biu2{position:absolute;top:-20px;left:34px;width:30px;height:5px;overflow:hidden;-webkit-transform:rotate(-30deg);
}
#biu22{position:absolute;top:0px;left:0px;width:30px;height:5px;background-color:yellow;opacity:0;
/*    -webkit-animation:biu11 3.4s linear
*/}
#biu3{position:absolute;top:-34px;left:20px;width:30px;height:5px;overflow:hidden;-webkit-transform:rotate(-60deg);
}
#biu33{position:absolute;top:0px;left:0px;width:30px;height:5px;background-color:yellow;opacity:0;
/*    -webkit-animation:biu11 3.4s linear
*/}
#biu4{position:absolute;top:-40px;left:0px;width:30px;height:5px;overflow:hidden;-webkit-transform:rotate(-90deg);
}
#biu44{position:absolute;top:0px;left:0px;width:30px;height:5px;background-color:yellow;opacity:0;
/*    -webkit-animation:biu11 3.4s linear
*/}
#biu5{position:absolute;top:-34px;left:-20px;width:30px;height:5px;overflow:hidden;-webkit-transform:rotate(-120deg);
}
#biu55{position:absolute;top:0px;left:0px;width:30px;height:5px;background-color:yellow;opacity:0;
/*    -webkit-animation:biu11 3.4s linear
*/}
#biu6{position:absolute;top:-20px;left:-34px;width:30px;height:5px;overflow:hidden;-webkit-transform:rotate(-150deg);
}
#biu66{position:absolute;top:0px;left:0px;width:30px;height:5px;background-color:yellow;-webkit-transform:rotate(60deg);opacity:0;
/*    -webkit-animation:biu11 3.4s linear
*/}
#biu7{position:absolute;top:0px;left:-40px;width:30px;height:5px;overflow:hidden;-webkit-transform:rotate(-180deg);
}
#biu77{position:absolute;top:0px;left:0px;width:30px;height:5px;background-color:yellow;opacity:0;
/*    -webkit-animation:biu11 3.4s linear
*/}
#kuang0
{
    position: absolute;
    opacity: 0;
/*    -webkit-animation:kuang0 0.4s linear 3s;
*/}
@-webkit-keyframes kuang0
{
    0%{opacity: 1;}
    100%{opacity: 1;}

}
@-webkit-keyframes k1
{
    0%{-webkit-transform:translate(0px,0px) scale(1,1);}
    90%{-webkit-transform:translate(0px,0px) scale(1,1);}
    100%{-webkit-transform:translate(-200px,-300px) scale(0.4,0.4);}
}


@-webkit-keyframes biu11
{
    0%{-webkit-transform:translate(-100px,0px);opacity: 0}
    25.5%{-webkit-transform:translate(-40px,0px);opacity: 1}
    36.6%{-webkit-transform:translate(40px,0px);opacity: 1}
    100%{-webkit-transform:translate(100px,0px);opacity: 0}
} 
@-webkit-keyframes huang2 
{
    0%{-webkit-transform:rotate(0deg) scale(1.34,1.33);opacity: 0}
    14%{-webkit-transform:rotate(0deg) scale(1.34,1.33);opacity: 0}
    15%{-webkit-transform:rotate(0deg) scale(1.34,1.33);opacity: 0.5}
    85%{-webkit-transform:rotate(360deg) scale(0.183,0.18);opacity: 0.5}
    99.99%{-webkit-transform:rotate(360deg) scale(0.183,0.18);opacity: 0.5}
    100%{opacity: 0}
}
@-webkit-keyframes huang3
{
    0%{-webkit-transform:rotate(0deg) scale(1.34,1.33);opacity: 0}
    29%{-webkit-transform:rotate(0deg) scale(1.34,1.33);opacity: 0}
    30%{-webkit-transform:rotate(0deg) scale(1.34,1.33);opacity: 0.5}
    99.99%{-webkit-transform:rotate(360deg) scale(0.183,0.18);opacity: 0.5}
    100%{opacity: 0}
}

#page2
{
    display:none;position:absolute;top:-50px;left:0px;background-color: white;
}

#lan2
{
    position:absolute;top:630px;left:370px;opacity: 0;
/*    -webkit-animation:lan2 3s linear 6.2s;from liangziyun
*/}
@-webkit-keyframes lan2
{
    0%{-webkit-transform:rotate(8deg) scale(1,1);opacity: 1;}
    85%{-webkit-transform:rotate(38deg) scale(1,1);opacity: 1;}
    100%{-webkit-transform:rotate(20deg) translate(-17px,-40px) scale(0.6,0.6);opacity: 0}
}

#hong{
    position:absolute;top:67px;left:50px;opacity: 0;
/*    -webkit-animation:hong 3.2s linear from kawa;
*/}
@-webkit-keyframes hong
{
    0%{-webkit-transform:translate(0px,0px) rotate(30deg) scale(0.7,0.7);opacity: 0}
    13.5%{-webkit-transform:translate(-20px,0px) rotate(-10deg) translate(0px,0px) scale(1,1);opacity: 1}
    86.5%{-webkit-transform:translate(-20px,0px) rotate(10deg) translate(0px,0px) scale(1,1);opacity: 1}
    100%{-webkit-transform:translate(-20px,0px) rotate(10deg) translate(0px,0px) scale(1,1);opacity: 0}
}
#hu2
{
    position:absolute;top:55px;left:80px;opacity: 0;
}
@-webkit-keyframes hu2
{
    0%{-webkit-transform:translate(0px,0px) rotate(91deg) scale(0.8,0.8);opacity: 1}
    15.5%{-webkit-transform:translate(20px,0px) rotate(141deg) scale(0.63,0.61);opacity: 1}
    91.5%{-webkit-transform:translate(0px,0px) rotate(100deg) scale(0.59,0.59);opacity: 1}
    100%{-webkit-transform:translate(2px,-57px) rotate(100deg) scale(0.55,0.55);opacity: 0}
}

#page3
{
    position:absolute;top:-30px;left:0px;
    opacity: 0;
    display: none;
}
@-webkit-keyframes div3
{
    0%{opacity: 0}
    18.8%{opacity: 1}
    86.6%{opacity: 1}
    100%{opacity: 0}
}
#bg3
{
    position: absolute;top: 0px;left: 0px;opacity: 0;
}
@-webkit-keyframes bg3
{
    0%{-webkit-transform:translate(0px,-3px);opacity: 1}
    18.8%{-webkit-transform:translate(0px,0px);opacity: 1}
    86.6%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
#lan3{
    position:absolute;top:322px;left:15px;opacity: 0;
}

@-webkit-keyframes lan3
{
    0%{-webkit-transform:rotate(0deg) scale(1.3,1.3);opacity: 1;}
    7%{-webkit-transform:rotate(38deg) scale(1.3,1.3);opacity: 1;}
    85.7%{-webkit-transform:translate(0px,0px) rotate(18deg) scale(1.3,1.3);opacity: 1;}
    100%{-webkit-transform:translate(0px,-39px) rotate(18deg) scale(1.3,1.3);opacity: 0}
}
#wenzi1
{
    position:absolute;top:21px;left:16px;opacity: 0;color: white;
}
@-webkit-keyframes wenzi1
{
    0%{-webkit-transform:translate(0px,0px) rotate(-5deg) scale(1.4,1.4);opacity: 0}
    6.49%{-webkit-transform:translate(0px,0px) rotate(-5deg) scale(1.4,1.4);opacity: 0}
    7%{-webkit-transform:translate(0px,0px) rotate(20deg) scale(1.4,1.4);opacity: 0}
    22.1%{-webkit-transform:translate(0px,0px) rotate(-5deg) scale(1.4,1.4);opacity: 2}
    85.7%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(1.4,1.4);opacity: 2}
    100%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(1.4,1.4);opacity: 0}
}
#hu3
{
    position:absolute;top:210px;left:50px;opacity: 0;
}
@-webkit-keyframes hu3
{
    0%{-webkit-transform:translate(0px,0px) rotate(-30deg) scale(0.45,0.45);opacity: 1}
    7%{-webkit-transform:translate(-10px,60px) rotate(-30deg) scale(0.45,0.45);opacity: 1}
    85.7%{-webkit-transform:translate(-10px,70px) rotate(-10deg) scale(0.45,0.45);opacity: 1}
    100%{-webkit-transform:translate(-10px,-109px) rotate(-10deg) scale(0.45,0.45);opacity: 0}
}
#wenzi2
{
    position:absolute;top:60px;left:46px;opacity: 0;color: white;
}
@-webkit-keyframes wenzi2
{
    0%{-webkit-transform:translate(0px,0px) rotate(-5deg) scale(2.8,2.8);opacity: 0}
    6.49%{-webkit-transform:translate(0px,0px) rotate(-5deg) scale(2.8,2.8);opacity: 0}
    7%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(2.8,2.8);opacity: 0}
    22.1%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(2.8,2.8);opacity: 1}
    85.7%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(2.8,2.8);opacity: 1}
    100%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(2.8,2.8);opacity: 0}
}
#page4
{
    position:absolute;
    top:0px;left:0px;opacity: 0;
    display: none;
}
@-webkit-keyframes div4
{
    0%{opacity: 0}
    11.9%{opacity: 1}
    100%{opacity: 1}
}
#bg4
{
    position: absolute;top: 0px;left: 0px;
}
@-webkit-keyframes bg4
{
    0%{-webkit-transform:translate(0px,-3px);opacity: 1;}
    18.8%{-webkit-transform:translate(0px,0px);opacity: 1;}
    86.6%{-webkit-transform:translate(0px,0px);opacity: 1;}
    100%{-webkit-transform:translate(0px,0px);opacity: 1;}
}
#hu4
{
    position:absolute;top:460px;left:340px;opacity: 0;
}
#lan4
{
    position:absolute;top:490px;left:300px;opacity: 0;
}

@-webkit-keyframes hu4
{
    0%{-webkit-transform:rotate(-40deg) scale(0.3,0.3);opacity: 1;}
    8.3%{-webkit-transform:rotate(-40deg) scale(1,1);opacity: 1;}
    10.7%{-webkit-transform:rotate(-40deg) scale(0.8,0.8);opacity: 1;}
    90%{-webkit-transform:rotate(0deg) scale(0.8,0.8);opacity: 1}
    100%{-webkit-transform:rotate(50deg) scale(0.8,0.8);opacity: 0}
}
@-webkit-keyframes camera
{
    0%{-webkit-transform:rotate(-40deg) scale(0.3,0.3);opacity: 0}
    4.7%{-webkit-transform:rotate(-40deg) scale(0.3,0.3);opacity: 0}
    4.8%{-webkit-transform:rotate(-40deg) scale(0.3,0.3);opacity: 1}
    15.5%{-webkit-transform:rotate(-40deg) scale(0.8,0.8);opacity: 1}
    90%{-webkit-transform:rotate(10deg) scale(0.8,0.8);opacity: 1}
    100%{-webkit-transform:rotate(60deg) scale(0.8,0.8);opacity: 0}
}
@-webkit-keyframes lan4
{
    0%{-webkit-transform:rotate(0deg) scale(0.3,0.3);opacity: 0}
    4.7%{-webkit-transform:rotate(0deg) scale(0.3,0.3);opacity: 0}
    4.8%{-webkit-transform:rotate(0deg) scale(0.3,0.3);opacity: 1}
    12.5%{-webkit-transform:rotate(0deg) scale(1,1);opacity: 1}
    15.5%{-webkit-transform:rotate(0deg) scale(0.8,0.8);opacity: 1}
    90%{-webkit-transform:translate(0px,0px) rotate(-40deg) scale(0.8,0.8);opacity: 1}
    100%{-webkit-transform:rotate(0deg) translate(-70px,17px) scale(0.8,0.8);opacity: 0}
}
#t1
{
    position: absolute;top: -40px;left: -180px;opacity: 1;
}
#a1
{
    position: absolute;top: -40px;left: -165px;opacity: 1;
}
#k
{
    position: absolute;top: -22px;left: -125px;opacity: 1;
}
#e
{
    position: absolute;top: -40px;left: -135px;opacity: 1;
}
#a2
{
    position: absolute;top: -40px;left: -105px;opacity: 1;
}
#p1
{
    position: absolute;top: -40px;left: -75px;opacity: 1;
}
#h
{
    position: absolute;top: -40px;left: -60px;opacity: 1;
}
#o1
{
    position: absolute;top: -40px;left: -45px;opacity: 1;
}
#t2
{
    position: absolute;top: -41px;left: -30px;opacity: 1;
}
#o2
{
    position: absolute;top: -40px;left: -15px;opacity: 1;
}

@-webkit-keyframes t1
{
    0%{-webkit-transform:translate(139px,0px);}
    40%{-webkit-transform:translate(0px,0px);}
    100%{-webkit-transform:translate(0px,0px);}
}
@-webkit-keyframes a1
{
    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    3.74%{-webkit-transform:translate(139px,0px);opacity: 0}
    3.75%{-webkit-transform:translate(139px,0px);opacity: 1}
    43.75%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
@-webkit-keyframes k
{
    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    6.66%{-webkit-transform:translate(139px,0px);opacity: 0}
    6.67%{-webkit-transform:translate(139px,0px);opacity: 1}
    46.67%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
@-webkit-keyframes e
{
    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    9.99%{-webkit-transform:translate(139px,0px);opacity: 0}
    10%{-webkit-transform:translate(139px,0px);opacity: 1}
    50%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
@-webkit-keyframes a2
{    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    13.84%{-webkit-transform:translate(139px,0px);opacity: 0}
    13.85%{-webkit-transform:translate(139px,0px);opacity: 1}
    53.85%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
@-webkit-keyframes p1
{    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    18.32%{-webkit-transform:translate(139px,0px);opacity: 0}
    18.33%{-webkit-transform:translate(139px,0px);opacity: 1}
    58.33%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
@-webkit-keyframes h
{    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    23.63%{-webkit-transform:translate(139px,0px);opacity: 0}
    23.64%{-webkit-transform:translate(139px,0px);opacity: 1}
    63.64%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
@-webkit-keyframes o1
{    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    29.99%{-webkit-transform:translate(139px,0px);opacity: 0}
    30%{-webkit-transform:translate(139px,0px);opacity: 1}
    70%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}

@-webkit-keyframes t2
{    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    37.77%{-webkit-transform:translate(139px,0px);opacity: 0}
    37.78%{-webkit-transform:translate(139px,0px);opacity: 1}
    77.78%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}

@-webkit-keyframes o2
{    0%{-webkit-transform:translate(139px,0px);opacity: 0}
    47.4%{-webkit-transform:translate(139px,0px);opacity: 0}
    47.5%{-webkit-transform:translate(139px,0px);opacity: 1}
    87.5%{-webkit-transform:translate(0px,0px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
#zimu
{
    position: absolute;top: 85px;left: 200px;opacity: 0;
}
@-webkit-keyframes zimu
{
    0%{-webkit-transform:translate(0px,0px) rotate(-7deg) scale(1,1);opacity: 1}
    53.75%{-webkit-transform:translate(0px,0px) rotate(-7deg) scale(1,1);opacity: 1}
    57.5%{-webkit-transform:translate(0px,0px) rotate(-7deg) scale(1,1);opacity: 0.5}
    61.25%{-webkit-transform:translate(0px,0px) rotate(-7deg) scale(1,1);opacity: 1}
    85%{-webkit-transform:translate(0px,0px) rotate(-7deg) scale(1,1);opacity: 1}
    100%{-webkit-transform:translate(-200px,20px) rotate(-7deg) scale(1,1);opacity: 0}
}
#camera
{
    position:absolute;height: 137px;width: 132px;top:471px;left:357px;opacity: 0;
}
@-webkit-keyframes camera
{
    0%{-webkit-transform:rotate(-40deg) scale(0.3,0.3);opacity: 0}
    4.7%{-webkit-transform:rotate(-40deg) scale(0.3,0.3);opacity: 0}
    4.8%{-webkit-transform:rotate(-40deg) scale(0.3,0.3);opacity: 1}
    15.5%{-webkit-transform:rotate(-40deg) scale(0.8,0.8);opacity: 1}
    90%{-webkit-transform:rotate(10deg) scale(0.8,0.8);opacity: 1}
    100%{-webkit-transform:rotate(60deg) scale(0.8,0.8);opacity: 0}
}
#guang
{
    position:absolute;top:23px;left:30px;
}
@-webkit-keyframes guang
{
    0%{opacity: 1}
    50%{opacity: 1}
    50.1%{opacity: 0}
    100%{opacity: 0}
}
#guang1
{
    position: absolute;top: -11px;left: 15px;-webkit-transform:rotate(-121deg);
}
#guang2
{
    position: absolute;top: -9px;left: 28px;-webkit-transform:rotate(-52deg);
}
#guang3
{
    position: absolute;top: 1px;left: 32px;-webkit-transform:rotate(0deg);
}
#img1h
{
    position:absolute;width: 900px;height: 700px;top:90px;left: 20px; background-color:white;opacity: 0;
}

#img2h
{
    position:absolute;width: 900px;height: 700px;top:90px;left: 20px; background-color:white;opacity: 0;
}
#img3v
{
    position:absolute;width: 480px;height: 700px;top:40px;left: 10px; background-color:white;opacity: 0;
}

#img4v
{
    position:absolute;width: 480px;height: 750px;top:-205px;left: 20px; background-color:white;opacity: 0;
}


#img0{
    
    position: absolute;
    top: 30px;
    left: 24px;
    width: 450px;
    height: 760px;
    background-color: white;
    opacity: 0;
}

#img1v
{
    position: absolute;
    top: 38px;
    left: 24px;
    width: 450px;
    height: 760px;
    opacity: 0;
    background-color: white;
}

#img2v
{
    position:absolute;width: 450px;height: 760px;top:50px;left: 24px;opacity: 0; background-color:white;
}
#img3h
{
    position:absolute;width: 520px;height: 435px;top:310px;left: 10px; background-color:white;opacity: 0;
}
#img4h
{
    position:absolute;width: 615px;height: 493px;top:60px;left: 20px; background-color:white;opacity: 0;
}
@-webkit-keyframes img0
{
    0%{-webkit-transform:translate(0px,-12px);opacity: 0}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
} 
@-webkit-keyframes liangziyun_title
{
    0%{opacity: 0;}
    40.98%{opacity: 0;}
    41.6%{-webkit-transform:translate(0px,0px) rotate(360deg) scale(0.183,0.18);opacity: 1}
    69.3%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(1.8,1.78);opacity: 1}
    100%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(1.8,1.78);opacity: 1}
}
@-webkit-keyframes img10
{
    0%{-webkit-transform:translate(0px,0px);opacity:0;}
    100%{-webkit-transform:translate(-100px,0px);opacity:1;}
}
@-webkit-keyframes img30
{
    0%{-webkit-transform:translate(-100px,0px);opacity: 1}
    38.42%{-webkit-transform:translate(-210px,0px);opacity: 1}
    43.47%{-webkit-transform:translate(-220px,0px);opacity: 0.5}
    50.12%{-webkit-transform:translate(-230px,0px);opacity: 1}
    83.50%{-webkit-transform:translate(-330px,0px);opacity: 1}
    100%{-webkit-transform:translate(-450px,0px);opacity: 1}
}
@-webkit-keyframes img2h
{
    0%{-webkit-transform:translate(0px,0px);opacity: 0}
    18.8%{-webkit-transform:translate(-100px,0px);opacity: 1}
    50%{-webkit-transform:translate(-210px,0px);opacity: 1}
    54.1%{-webkit-transform:translate(-220px,0px);opacity: 0.5}
    59.5%{-webkit-transform:translate(-230px,0px);opacity: 1}
    86.6%{-webkit-transform:translate(-330px,0px);opacity: 1}
    100%{-webkit-transform:translate(-450px,0px);opacity: 1}
}
@-webkit-keyframes img3v
{
    0%{-webkit-transform:translate(0px,300px);opacity: 0}
    18.8%{-webkit-transform:translate(0px,200px);opacity: 1}
    50%{-webkit-transform:translate(0px,154px);opacity: 1}
    54.1%{-webkit-transform:translate(0px,148px);opacity: 0.5}
    59.5%{-webkit-transform:translate(0px,142px);opacity: 1}
    86.6%{-webkit-transform:translate(0px,100px);opacity: 1}
    100%{-webkit-transform:translate(0px,0px);opacity: 1}
}
@-webkit-keyframes img4v
{
    0%{-webkit-transform:translate(0px,0px);opacity: 0}
    38.8%{-webkit-transform:translate(0px,80px);opacity: 1}
    44.8%{-webkit-transform:translate(0px,86px);opacity: 0.5}
    52.2%{-webkit-transform:translate(0px,92px);opacity: 1}
    86.6%{-webkit-transform:translate(0px,160px);opacity: 1}
    100%{-webkit-transform:translate(0px,265px);opacity: 1}
}
@-webkit-keyframes to_kawa_show
{
    0%{-webkit-transform:translate(0px,0px) rotate(0deg) scale(1.8,1.78);opacity: 1}
    100%{-webkit-transform:translate(-185px,-231px) rotate(0deg) scale(1,1);opacity: 0}
}
@-webkit-keyframes dishuang
{
    0%{-webkit-transform:translate(0px,0px) rotate(-380deg) scale(2.14,2.13);opacity: 1;}
    100%{-webkit-transform:translate(-185px,-231px) rotate(-290deg) scale(0.8,0.8);opacity: 1;}
}
@-webkit-keyframes jimg1
{
    0%{opacity: 0}
    100%{opacity: 1}
}
@-webkit-keyframes img1
{
    0%{-webkit-transform:translate(0px,0px);opacity: 1}
    38.8%{-webkit-transform:translate(0px,13px);opacity: 1}
    44.8%{-webkit-transform:translate(0px,15px);opacity: 0.5}
    52.2%{-webkit-transform:translate(0px,17.5px);opacity: 1}
    86.6%{-webkit-transform:translate(0px,29px);opacity: 1}
    100%{-webkit-transform:translate(0px,52px);opacity: 0}
}

@-webkit-keyframes img2
{
    0%{-webkit-transform:translate(0px,48px);opacity: 0}
    18.8%{-webkit-transform:translate(0px,40px);opacity: 1}
    50%{-webkit-transform:translate(0px,27px);opacity: 1}
    54.1%{-webkit-transform:translate(0px,25px);opacity: 0.5}
    59.5%{-webkit-transform:translate(0px,22.5px);opacity: 1}
    86.6%{-webkit-transform:translate(0px,11px);opacity: 1}
    100%{-webkit-transform:translate(0px,-12px);opacity: 0}
}
@-webkit-keyframes img3
{
    0%{-webkit-transform:translate(0px,0px);opacity: 0}
    18.8%{-webkit-transform:translate(-40px,0px);opacity: 1}
    50%{-webkit-transform:translate(-68px,0px);opacity: 1}
    54.1%{-webkit-transform:translate(-74px,0px);opacity: 0.5}
    59.5%{-webkit-transform:translate(-80px,0px);opacity: 1}
    86.6%{-webkit-transform:translate(-104px,0px);opacity: 1}
    100%{-webkit-transform:translate(-150px,0px);opacity: 0}
}

@-webkit-keyframes img4
{
    0%{-webkit-transform:translate(0px,0px);opacity: 0}
    18.8%{-webkit-transform:translate(-12px,0px);opacity: 1}
    50%{-webkit-transform:translate(-18px,0px);opacity: 1}
    54.1%{-webkit-transform:translate(-21px,0px);opacity: 0.5}
    59.5%{-webkit-transform:translate(-24px,0px);opacity: 1}
    86.6%{-webkit-transform:translate(-42px,0px);opacity: 1}
    100%{-webkit-transform:translate(-122px,0px);opacity: 1}
}

@-webkit-keyframes jianying
{
    0%{opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes huang1in
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(-360deg);}
}
</style>

<div id='container'>
    <div id='page4' style="width: 500px;height: 815px;" >

    <div id="div4h" style="position:absolute;top:54px;width: 470px;height: 500px;overflow: hidden;">
        <img id="img4h" style="position: absolute;">
        <span id='word4h' class='showwords'></span>
    </div>
    <div id="div4v" style='position:absolute;top:50px;left: 10px;width: 480px;height: 500px;overflow: hidden;'>
        <div id="div4vv" style='position:absolute;top:-150px;left: 10px;width: 480px;height: 500px;'>
            <img id="img4v" style="position: absolute;">
            <span id='word4v' class='showwords'></span>
        </div>
    </div>
        <img id="bg4" src="<?=$p?>images/kuanga4.png" >
        <img id='lan4' src="<?=$p?>images/lan.png">
        <img id='hu4' src="<?=$p?>images/huang.png" >
        <div id="camera">
            <img src="<?=$p?>images/camera.png" style="position:absolute;top:20px;left:10px;" >
            <div id="guang">
                <img id="guang1" src="<?=$p?>images/guang.png">
                <img id="guang2" src="<?=$p?>images/guang.png">
                <img id="guang3" src="<?=$p?>images/guang.png">
            </div>
        </div>
        <div id="zimu">
            <img id='t1' src="<?=$p?>images/T.png" >
            <img id='a1' src="<?=$p?>images/A.png" >
            <img id='k' src="<?=$p?>images/K.png" >
            <img id='e' src="<?=$p?>images/E.png" >
            <img id='a2' src="<?=$p?>images/A.png" >
            <img id='p1' src="<?=$p?>images/P.png" >
            <img id='h' src="<?=$p?>images/H.png" >
            <img id='o1' src="<?=$p?>images/O.png" >
            <img id='t2' src="<?=$p?>images/T.png" >
            <img id='o2' src="<?=$p?>images/O.png" >
        </div>
    </div> 
<!-- 第三幅  -->
    <div id='page3' style="display: none;width: 500px;height: 815px;" >
        <div id="div3h" style='position:absolute;top:310px;left:-5px;width: 480px;height: 440px;overflow: hidden;'>
            <div id="div3hh" style='position:absolute;top:310px;left:50px;width: 480px;height: 440px;'></div>
            <img id="img3h" style="position: absolute;">
            <span id='word3h' class='showwords'></span>
        </div>

        <div id="div3v" style="width: 480px;height: 440px;overflow: hidden;">
            <img id="img3v" style="position: absolute;">
            <span id='word3v' class='showwords'></span>
        </div>
        <img id="bg3" src="<?=$p?>images/kuanga3.png" >
        <div id="lan3">
            <img  src="<?=$p?>images/lan.png" >
            <b id="wenzi1">人生</b>
        </div>

        <div id='hu3'>
            <img  src="<?=$p?>images/huang.png" >
            <b id="wenzi2">如戏</b>
        </div>
    </div> 

<!-- 第二幅  -->
    <div id='page2' style="display:none;width: 500px;height: 815px;" >
    <div id="div2v"  style='position:absolute;top:50px;width: 480px;height: 745px;overflow: hidden;'>
        <img id="img2v" style="position: absolute;">
        <span id='word2v' class='showwords'></span>
    </div> 
    <div id="div2h" style='position:absolute;top:95px;width: 480px;height: 720px;overflow: hidden;'>
        <img id="img2h" style="position: absolute;">
        <span id='word2h' class='showwords'></span>
    </div> 

        <img src="<?=$p?>images/kuanga2.png" style='position:absolute;top:0px;left:0px;'>
        <img id='hong' src="<?=$p?>images/hong.png" >
        <img id='lan2' src="<?=$p?>images/lan.png" >
        <img id='hu2' src="<?=$p?>images/huang.png" >
    </div> 

<!-- 第一幅 -->
    <div id='page1' style="display:none;width: 500px;height: 815px;" >
    <div id="div1v" style='position:absolute;top:50px;width: 480px;height: 745px;overflow: hidden;'>
        <img id="img1v" style="position: absolute;">
        <span id='word1v' class='showwords'></span>
    </div>    
    <div id="div1h" style="position:absolute;top:95px;width: 480px;height: 720px;overflow: hidden;">
        <img id="img1h" style="position: absolute;">
        <span id='word1h' class='showwords'></span>
    </div> 
        <img id="kuang1" src="<?=$p?>images/kuanga1.png">
        <img id='memory' src="<?=$p?>images/memory.png" >
        <img id='huu1' src="<?=$p?>images/huang.png" >
        <img id='huu11' src="<?=$p?>images/huang.png" >
    </div>

<!-- 开头 -->
    <div id="div0" style="position:absolute;top:-50px;left:0px;display:none;width: 500px;height: 815px;">
        <img id="kuang0" src="<?=$p?>images/kuanga1.png" style="position:absolute;top:0px;left:0px;">
        <div id='k1'>
            <div id='huang1' style='width:131px;height:131px;'>
                <img id='huang1in' style='position:absolute;-webkit-animation: huang1in 5s linear both' src="<?=$p?>images/huang.png" >
            </div>
            <img id='huang2' src="<?=$p?>images/huang.png" >
            <img id='huang3' src="<?=$p?>images/huang.png" >
            <div id='pagetitle' style='position:absolute;width:130px;height:120px;top:20px;left:0px;font-size:20px;color:black;overflow:hidden;text-shadow:0px 0px 0px rgba(0, 0, 0, 0.2);'>
            <div style='position:absolute;width:130px;height:120px;top:0px;left:0px;overflow:hidden;'>
            <div style='position:absolute;width:130px;height:120px;display:table;overflow:hidden;'>
                <div id='titlecontent' style='width:130px;height:120px;vertical-align:middle;color:black;display:table-cell;text-align:center;'></div>
            </div>
            </div>
            </div>
            <div style='position:absolute;top:70px;left:50px;'>
                <div id='biu1' >
                <div id='biu11' ></div>
                </div>
                <div id='biu2' >
                <div id='biu22' ></div>
                </div>
                <div id='biu3' >
                <div id='biu33' ></div>
                </div>
                <div id='biu4' >
                <div id='biu44' ></div>
                </div>
                <div id='biu5' >
                <div id='biu55' ></div>
                </div>
                <div id='biu6' >
                <div id='biu66' ></div>
                </div>
                <div id='biu7' >
                <div id='biu77'> </div>
                </div>
            </div>
        </div> 
    </div>
</div>



<script>

var timeout0 = 0;
var timeout1 = 0;
var timeout2 = 0;
var timeout3 = 0;
var timeout4 = 0;
var timeout5 = 0;
var timeout6 = 0;
var timeout7 = 0;
var timeout8 = 0;
var timeout9 = 0;
var timeout10 = 0;
var timeout12 = 0;


var image_size_width=[];
var image_size_height=[];
var  Onload_imgs_url=[];

var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var bl_keepload = 'first';
var step_loadnum = 5;

var get_pid = function(url){
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];

    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    liangziyun_title();

    bl_keepload = 'first';
    step_load();       
}
function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    console.log(Onload_imgs_url[index]);
    console.log(have_num + '-' + error_num);
    if((have_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;

        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            to_kawa_show();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    to_kawa_show();
                },dis_titletime);
        }
    }
}
function image_onload(event)
{
    if(reshow == true)
        return;
    var img=event.target;
    var index = img.index;
    if(index < step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    if((have_num +error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;

        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            to_kawa_show();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    to_kawa_show();
                },dis_titletime);
        }

    }
}
var divwidth = {'0h':900,'0v':450,'1h':900,'1v':450,'2h':900,'2v':450,'3h':520,'3v':480,'4h':615,'4v':480};
var divheight = {'0h':700,'0v':800,'1h':700,'1v':800,'2h':700,'2v':760,'3h':435,'3v':700,'4h':495,'4v':700};
function setImage(idname)
{
    if(reshow == true)
    return;
    if(image_url_index == Onload_imgs_url.length)
    image_url_index = 0;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div;
    var div1;
    var divname;
    var heng = 0;
    if(img_bili > 1)
    {
    divname = idname + 'h';
    div = id('div'+idname+'h');
    div1 = id('div'+idname+'v');
    heng = 1;
    }
    else
    {
    divname = idname + 'v';
    div = id('div'+idname+'v');
    div1 = id('div'+idname+'h');
    }

    div.style.display = 'block';
    div1.style.display = 'none';


    var height = divheight[divname];
    var width = divwidth[divname];

    var img = id('img'+divname);

    var word = id('word'+divname);
    var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    if(word_string != undefined)
    {   
        word_string = word_string.replace(/[\n]/ig,'');
        word.innerText = word_string;
        word.style.width = "100%";
        // if(divname == "4v")
        // {
        //     word.style.top = "80%";
        // }else {

        //     word.style.top = "50%";
        // }
    }
    else
    {
        word.innerText = "";
        word.style.width = "0%";
    }

    img.src = Onload_imgs_url[image_url_index];
    console.log(img.src);

    if(img_bili > (width/height))
    {
    img.style.top = '0px';
    img.style.height = height + 'px';
    img.style.width = height*img_bili + 'px';
    img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
    img.style.left = '0px';
    img.style.width = width+'px';
    img.style.height = width/img_bili + 'px';
    img.style.top = -((width/img_bili-height)/2) + 'px';
    }
    image_url_index++;
    }
</script>



<script>
var delaytime = 5000;
 function id(name)
 {
     return document.getElementById(name);
 }

 function liangziyun_title()
 {
    id('page1').style.display = 'none';
    id('page2').style.display = 'none';
    id('page3').style.display = 'none';
    id('page4').style.display = 'none';    
    id('div0').style.display='block';
    id('titlecontent').innerHTML = desc;
    id('pagetitle').style.webkitAnimation = 'liangziyun_title 3s linear  both';

     id('huang1').style.webkitAnimation = 'huang1 3s linear both';
     id('huang2').style.webkitAnimation = 'huang2 0.8s linear both';
     id('huang3').style.webkitAnimation = 'huang3 0.8s linear both';
     id('biu11').style.webkitAnimation = 'biu11 3.4s linear both';
     id('biu22').style.webkitAnimation = 'biu11 3.4s linear both';
     id('biu33').style.webkitAnimation = 'biu11 3.4s linear both';
     id('biu44').style.webkitAnimation = 'biu11 3.4s linear both';
     id('biu55').style.webkitAnimation = 'biu11 3.4s linear both';
     id('biu66').style.webkitAnimation = 'biu11 3.4s linear both';
     id('biu77').style.webkitAnimation = 'biu11 3.4s linear both';    
 }

 function to_kawa_show()
 {
    id('page1').style.display = 'none';
    id('page2').style.display = 'none';
    id('page3').style.display = 'none';
    id('page4').style.display = 'none';    
    id('pagetitle').style.webkitAnimation = 'to_kawa_show 0.6s linear both';     
    id('huang1').style.webkitAnimation = 'dishuang 0.6s linear both';  
    id('kuang0').style.webkitAnimation = 'kuang0 0.6s linear both';

     timeout8=setTimeout(show1, 600);
 }

 function jshow1()  
 { 
    setImage(1);
    // id('page4').style.display = 'none';
    // id('page2').style.display = 'none';
    // id('page3').style.display = 'none';
    //  id('page1').style.display= 'block';
     // id("img1v").style.webkitAnimation = "img0 0.6s linear  both";
     // id("img1h").style.webkitAnimation = "img10 0.6s linear both";
     id("huu1").style.webkitAnimation = "huu1111 0.6s linear  both";    

    timeout7= setTimeout(show1,1000);
 }
 function show1()
 {        
    setImage(1);
    id('page1').style.display = 'block';
    id('page2').style.display = 'none';
    id('page3').style.display = 'none';
    id('page4').style.display = 'none';    
        id("page4").style.webkitAnimation = "";
        id("page2").style.webkitAnimation = "";
        id("img2v").style.webkitAnimation = "";
        id("img2h").style.webkitAnimation = "";
        id("lan2").style.webkitAnimation = "";
        id("hong").style.webkitAnimation = "";
        id("hu2").style.webkitAnimation = "";
     id("div0").style.display = "none";
     id('page1').style.display= 'block';
     id("img1v").style.webkitAnimation = "img1 6s linear both";
     id("img1h").style.webkitAnimation = "img30 6s linear both";
     id("huu1").style.webkitAnimation = "huu1 6s linear  both";
     // id("lan1").style.webkitAnimation = "lan1 4s linear both";
     id("memory").style.webkitAnimation = "memory 5.5s linear 0.5s both";
     
     id("huu11").style.webkitAnimation = "huu11 5.8s linear 0.2s both";

     timeout2 = setTimeout(kawa_show2,6000);

 }
 function kawa_show2()
 {    
        setImage(2);
        id("page3").style.webkitAnimation = "";
        id("bg3").style.webkitAnimation = "";
        id("img3h").style.webkitAnimation = "";
        id("img3v").style.webkitAnimation = "";
        id("lan3").style.webkitAnimation = "";
        id("wenzi1").style.webkitAnimation = "";
        id("wenzi2").style.webkitAnimation = "";
        id("hu3").style.webkitAnimation = "";
    id('page3').style.display = 'none';
    id('page4').style.display = 'none';
    id("page1").style.display = "none";
     id('page2').style.display= 'block';
     id("img2v").style.webkitAnimation = "img2 7s linear both";
     id("img2h").style.webkitAnimation = "img2h 7s linear both";
     id("lan2").style.webkitAnimation = "lan2 7s linear both";
     id("hong").style.webkitAnimation = "hong 7s linear both";
     id("hu2").style.webkitAnimation = "hu2 6.4s linear both";
     timeout3 = setTimeout(jy,6500);

 }
function jy()
{
        id('page1').style.display = 'none';
    id('page2').style.display = 'block';
    id('page3').style.display = 'none';
    id('page4').style.display = 'none';
id("page2").style.webkitAnimation =" jianying 0.5s  linear both";
timeout9 = setTimeout(liangziyun_show3,500);
}
 function liangziyun_show3()
 {  
    setImage(3);
        id('page2').style.display = 'none';
        id('page1').style.display = 'none';
        id('page4').style.display = 'none';
        id("page4").style.webkitAnimation = "";
        id("bg4").style.webkitAnimation = "";
        id("img4h").style.webkitAnimation = "";
        id("img4v").style.webkitAnimation = "";
        id('hu4').style.webkitAnimation ="";
        id('lan4').style.webkitAnimation ="";
        id('camera').style.webkitAnimation ="";
        id('zimu').style.webkitAnimation ="";
        id('t1').style.webkitAnimation ="";
        id('a1').style.webkitAnimation ="";
        id('k').style.webkitAnimation ="";
        id('e').style.webkitAnimation ="";
        id('p1').style.webkitAnimation ="";
        id('h').style.webkitAnimation ="";
        id('o1').style.webkitAnimation ="";
        id('t2').style.webkitAnimation ="";
        id('o2').style.webkitAnimation ="";
        id('a2').style.webkitAnimation ="";
        id('guang').style.webkitAnimation ="";

     id('page3').style.display= 'block';
     id("page3").style.webkitAnimation = "div3 7.4s linear  both";
     id("bg3").style.webkitAnimation = "bg3 7.4s linear  both";
     id("img3h").style.webkitAnimation = "img3 7.4s linear both";
     id("img3v").style.webkitAnimation = "img3v 7.4s linear  both";
     id("lan3").style.webkitAnimation = "lan3 7.1s linear 0.9s both";
     id("wenzi1").style.webkitAnimation = "wenzi1 7.4s linear  both";
     id("wenzi2").style.webkitAnimation = "wenzi2 7.4s linear  both";
     id("hu3").style.webkitAnimation = "hu3 4s linear  both";
     timeout4 = setTimeout(jy3,6800);

 }
 function jy3()
 {
    id('page1').style.display = 'none';
    id('page2').style.display = 'none';
    id('page3').style.display = 'block';
    id('page4').style.display = 'none';    
    id("page3").style.webkitAnimation = "jianying 0.6s linear  both";
    timeout10 = setTimeout(show4,600);
 }
 function show4()
 {    
    setImage(4);
        id("div0").style.webkitAnimation = "";
        id("page1").style.webkitAnimation = "";
        id("img1v").style.webkitAnimation = "";
        id("img1h").style.webkitAnimation = "";
        // id("lan1").style.webkitAnimation = "";
        id("memory").style.webkitAnimation = "";
        id("huu1").style.webkitAnimation = "";
        id("huu11").style.webkitAnimation = "";
        id("huang1").style.webkitAnimation = "";
     id('page3').style.display = 'none';
     id('page1').style.display = 'none';
    id('page2').style.display = 'none';
    id('page4').style.display= 'block';
    id("page4").style.webkitAnimation = "div4 6.4s linear both";
    id("bg4").style.webkitAnimation = "bg4 7s linear both";
    id("img4h").style.webkitAnimation = "img4 7s linear both";
    id("img4v").style.webkitAnimation = "img4v 7s linear both";
    id("lan4").style.webkitAnimation = "lan4 7s linear both";
    id("hu4").style.webkitAnimation = "hu4 7s linear both";
    id("camera").style.webkitAnimation = "camera 7s linear  both";
    id("zimu").style.webkitAnimation = "zimu 6.7s linear 0.3s both";
    id("t1").style.webkitAnimation = "t1 1.7s linear  both";
    id("a1").style.webkitAnimation = "a1 1.7s linear  both";
    id("k").style.webkitAnimation = "k 1.7s linear  both";
    id("e").style.webkitAnimation = "e 1.7s linear  both";
    id("a2").style.webkitAnimation = "a2 1.7s linear  both";
    id("p1").style.webkitAnimation = "p1 1.7s linear  both";
    id("h").style.webkitAnimation = "h 1.7s linear  both";
    id("o1").style.webkitAnimation = "o1 1.7s linear  both";
    id("t2").style.webkitAnimation = "t2 1.7s linear  both";
    id("o2").style.webkitAnimation = "o2 1.7s linear  both";
    id("guang").style.webkitAnimation = "guang 0.5s linear  infinite both";
     timeout5 = setTimeout(disimg4,6400);
 }
function disimg4()
{
    id('page1').style.display = 'none';
    id('page2').style.display = 'none';
    id('page3').style.display = 'none';
    id('page4').style.display = 'block';
    id("page4").style.webkitAnimation = 'jianying 0.6s  linear both';
    timeout6 = setTimeout(show1,650);
}

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}
function clearnode()
{    
    id('page1').style.display = 'none';
    id('page2').style.display = 'none';
    id('page3').style.display = 'none';
    id('page4').style.display = 'none';

    id('titlecontent').innerHTML = '';
// 开头清零kawa
    id('div0').style.display='none';
    id('pagetitle').style.webkitAnimation = '';
     id('kuang0').style.webkitAnimation = '';
     id('huang1').style.webkitAnimation = '';
     id('huang2').style.webkitAnimation = '';
     id('huang3').style.webkitAnimation = '';
     id('biu11').style.webkitAnimation = '';
     id('biu22').style.webkitAnimation = '';
     id('biu33').style.webkitAnimation = '';
     id('biu44').style.webkitAnimation = '';
     id('biu55').style.webkitAnimation = '';
     id('biu66').style.webkitAnimation = '';
     id('biu77').style.webkitAnimation = '';
     id('kuang0').style.webkitAnimation = '';
// 第二页
        id("page2").style.webkitAnimation = "";
        id("img2v").style.webkitAnimation = "";
        id("img2h").style.webkitAnimation = "";
        id("lan2").style.webkitAnimation = "";
        id("hong").style.webkitAnimation = "";
        id("hu2").style.webkitAnimation = "";
// 第三页
        id("page3").style.webkitAnimation = "";
        id("bg3").style.webkitAnimation = "";
        id("img3h").style.webkitAnimation = "";
        id("img3v").style.webkitAnimation = "";
        id("lan3").style.webkitAnimation = "";
        id("wenzi1").style.webkitAnimation = "";
        id("wenzi2").style.webkitAnimation = "";
        id("hu3").style.webkitAnimation = "";
// 第四页
        id("page4").style.webkitAnimation = "";
        id("bg4").style.webkitAnimation = "";
        id("img4h").style.webkitAnimation = "";
        id("img4v").style.webkitAnimation = "";
        id('hu4').style.webkitAnimation ="";
        id('lan4').style.webkitAnimation ="";
        id('camera').style.webkitAnimation ="";
        id('zimu').style.webkitAnimation ="";
        id('t1').style.webkitAnimation ="";
        id('a1').style.webkitAnimation ="";
        id('k').style.webkitAnimation ="";
        id('e').style.webkitAnimation ="";
        id('p1').style.webkitAnimation ="";
        id('h').style.webkitAnimation ="";
        id('o1').style.webkitAnimation ="";
        id('t2').style.webkitAnimation ="";
        id('o2').style.webkitAnimation ="";
        id('a2').style.webkitAnimation ="";
        id('guang').style.webkitAnimation ="";
// 第一页
        id("page1").style.webkitAnimation = "";
        id("img1v").style.webkitAnimation = "";
        id("img1h").style.webkitAnimation = "";
        // id("lan1").style.webkitAnimation = "";
        id("memory").style.webkitAnimation = "";
        id("huu1").style.webkitAnimation = "";
        id("huu11").style.webkitAnimation = "";
    clearTimeout(timeout0);
    clearTimeout(timeout1);
    clearTimeout(timeout2);
    clearTimeout(timeout3);
    clearTimeout(timeout4);
    clearTimeout(timeout5);
    clearTimeout(timeout6);
    clearTimeout(timeout7);
    clearTimeout(timeout8);
    clearTimeout(timeout9);
    clearTimeout(timeout10);
    clearTimeout(timeout12);

}


call_me(load_images);

</script>